<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<!-- 该设置用于适应多种设配（如pc、平板和手机等）设备 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" >
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" >
		<title>宜染在线</title>
		
				
        <style type="text/css">
            html{
                height:100%;
            }
            body{
                height:100%;
            }
            #app{
                width:100%;
                height:100%;
                background-color: bisque;

                position: relative;/*做为子元素的定位基准*/
            }

            #my-title{
                position:absolute;/*相对于父元素定位*/
                left:0px;
                top:0px;

                width:100%;
                height:50px;

                background-color: #111122;

            }

            #my-nav{
                position:absolute;/*相对于父元素定位*/
                left:0px;
                top:50px;
                bottom:30px;

                width:150px;

                background-color: #222222;

            }

            #my-content{
                position:absolute;/*相对于父元素定位*/
                left:150px;
                top:50px;
                bottom:30px;
                right:0px;

                background-color: #ffffff;

            }

            #my-copyright{
                position:absolute;/*相对于父元素定位*/
                left:0px;
                bottom:0px;

                width:100%;
                height:30px;

                background-color: #111122;

            }

            #my-content>iframe{
                width:100%;
                height:100%;
                border:none;
            }

            #my-text{
                font-size:26px;
                font-weight: bold;
                font-family: 楷体;
                color:#CCCCCC;
                line-height:50px;
                padding-left:5px;
            }

            #my-curruser{
                position:absolute;/*相对于父元素定位*/
                right:10px;
                top:15px;

                color:#CCCCCC;
                width:150px;
                text-align:right;
            }

            .my-main-menu{
                color:#AAAAAA;
                font-size:14px;
                padding-left:15px;
                height:35px;
                line-height:35px;
                cursor:pointer;
            }

            .my-sub-menu{
                
                padding-left:40px;

            }
            .my-sub-menu a{

                display:block;
                line-height:30px;
                font-size:14px;

            }

            .my-sub-menu a:link,.my-sub-menu a:visited{
                text-decoration: none;
                color:#AAAAAA;

            }

            .my-sub-menu a:hover{
                text-decoration: none;
                color:#ffffff;
            }
        </style>
        

	</head>
	
	<body>
	<div id="app">
        
        <div id="my-title">
            <div id="my-text">宜染在线</div>
            <div id="my-curruser" class="dropdown">
                <div class="dropdown-toggle"  data-toggle="dropdown"  >当前用户：{{currUser.userName}}</div>
                <div class="dropdown-menu ">
                        <a class="dropdown-item" href="#">修改密码</a>
                        <a class="dropdown-item" href="#">安全退出</a>
                      </div>
            </div>
        </div>
        <div id="my-nav">

                <div class="accordion" id="my-menu">
                       
                    <div >
                          
                        <div class="my-main-menu" data-toggle="collapse" data-target="#my-safty" >
                                安全管理
                          </div>
                      
                          <div id="my-safty" class="collapse my-sub-menu"  data-parent="#my-menu">
                            <a href="#">用户管理</a>
                            <a href="#">角色管理</a>
                          </div>

                    </div>

                    <div >
                          
                            <div class="my-main-menu" data-toggle="collapse" data-target="#my-info" >
                                    基础信息
                              </div>
                          
                              <div id="my-info" class="collapse my-sub-menu"  data-parent="#my-menu">
                                <a href="xxxxx" target="contentFrame">客户信息</a>
                                <a href="#">规格信息</a>
                                <a href="#">花色号信息</a>
                                
                              </div>
    
                        </div>

                   
                     
                    
                </div>


        </div>
        <div id="my-content"><iframe name="contentFrame"></iframe></div>
        <div id="my-copyright"></div>
        
		
	</div>	
	</body>
	
	
	
	
	<script src="../../js/vue.min.js"></script>
    <script src="../../js/axios.min.js"></script>
	<script src="../../js/my.js"></script>
    <script src="../../js/jquery-3.3.1.slim.min.js"></script>
    <script src="../../js/popper.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
	<script src="../../layer/layer.js"></script>

	
		
	
	<script type="text/javascript">
	
	let vm = new Vue({
		el:'#app',
		data:{
			currUser:{}
		},
		methods:{
			
        },
        mounted(){
            this.$myGet('/safty/home/curruser')
                .then((curruser)=>{
                    this.currUser=curruser;
                })
        }
	});
			
	</script>
	
	
</html>









